<template>
  <div class="insurance-info">
    <van-nav-bar
      fixed
      left-arrow
      title="汽车延保险"
      @click-left="onClickLeft"
    />
    <div class="safeguard-plan">
      <h1 class="child-title">▌ 保障计划</h1>
      <span class="text-span"
        >机动车辆延长保修责保险条款
        <van-icon class="help-icon" name="question-o"
      /></span>
      <a>查看责任详情</a>
    </div>
    <div class="car-owner-info">
      <h1 class="child-title">▌ 车主信息</h1>
      <van-cell-group>
        <van-field label="姓名" placeholder="请输入姓名" />
        <van-field label="身份证" placeholder="请输入身份证" />
        <van-field label="联系地址" placeholder="请输入联系地址" />
        <van-field label="联系地址" placeholder="请输入联系地址" />
      </van-cell-group>
    </div>
    <div class="car-info">
      <h1 class="child-title">▌ 车辆信息</h1>
      <van-cell-group>
        <van-field label="车牌" placeholder="请输入车牌" />
        <van-field
          v-model="carBrand"
          label="品牌"
          placeholder="请选择品牌"
          is-link=""
          @focus="showCarBrand = true"
        />
        <van-action-sheet
          v-model="showCarBrand"
          :round="false"
          :actions="carBrandList"
          @select="carBrandSelect"
        ></van-action-sheet>
        <van-field
          v-model="carType"
          label="车型"
          placeholder="请选择车型"
          is-link=""
          @focus="showCarType = true"
          :disabled="disable"
        />
        <van-action-sheet
          v-model="showCarType"
          :round="false"
          :actions="carTypeList"
          @select="carTypeSelect"
        ></van-action-sheet>
        <van-field label="排量" placeholder="请输入排量" />
        <van-field label="发动机号" placeholder="请输入发动机号" />
        <van-field label="车架号" placeholder="请输入车架号" />
        <van-field label="新车购置价" placeholder="请输入新车购置价" />
      </van-cell-group>
    </div>
    <div class="plan-info">
      <h1 class="child-title">▌ 方案信息</h1>
      <van-field
        v-model="plan"
        label="投保方案"
        placeholder="请选择投保方案"
        is-link=""
        @focus="showPlan = true"
      />
      <van-action-sheet
        v-model="showPlan"
        :round="false"
        :actions="planList"
        @select="planSelect"
      ></van-action-sheet>
      <van-field
        v-model="carAge"
        label="车龄"
        placeholder="请选择车龄"
        is-link=""
        @focus="showCarAge = true"
      />
      <van-action-sheet
        v-model="showCarAge"
        :round="false"
        :actions="carAgeList"
        @select="carAgeSelect"
      ></van-action-sheet>
      <van-field
        v-model="sellDate"
        label="车辆销售日期"
        right-icon="calendar-o"
        @focus="showSellDate = true"
      />
      <van-calendar v-model="showSellDate" @confirm="sellDateConfirm" />
      <van-field
        v-model="expirationDateStart"
        label="原厂保质起期"
        right-icon="calendar-o"
        @focus="showExpirationDateStart = true"
      />
      <van-calendar
        v-model="showExpirationDateStart"
        @confirm="expirationDateStartSelect"
      />
      <van-field label="原厂保质期起期(年)" placeholder="请输入原厂保质起期" />
      <van-field label="原厂保修公里数" placeholder="请输入公里数" />
      <van-field
        v-model="expirationDateStart"
        label="延保销售日期"
        right-icon="calendar-o"
        @focus="showExpirationDateStart = true"
      />
      <van-calendar
        v-model="showExpirationDateStart"
        @confirm="expirationDateStartSelect"
      />
      <van-field label="等待期(天)" placeholder="请输入等待期" />
      <van-field label="车辆购置价(元)" placeholder="请输入车辆购置价" />
      <van-field label="赔偿限额" placeholder="请输入赔偿限额" />
    </div>
    <div class="plan-info">
      <div class="plan-info-span"></div>
      <van-field label="延保期限" placeholder="X年" />
      <van-field
        v-model="expirationDateStart"
        label="延保起期"
        right-icon="calendar-o"
        @focus="showExpirationDateStart = true"
      />
      <van-field
        v-model="expirationDateStart"
        label="延保止期"
        right-icon="calendar-o"
        @focus="showExpirationDateStart = true"
      />
      <van-checkbox v-model="checked"
        >我已阅读《投保须知》《保险条款》《信息披露》的全部内容</van-checkbox
      >
      <div class="immediate-insurance">
        <span>140.00</span>元起
        <van-button class="button" type="warning">立即投保</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: true,
      sellDate: '', // 车辆销售日期
      expirationDateStart: '',
      showSellDate: false,
      disable: true,
      title: '汽车延保险',
      carBrand: '', // 汽车品牌
      carType: '', // 汽车类型
      plan: '', // 投保方案
      carAge: '', // 车龄
      showCarType: false,
      showCarBrand: false,
      showPlan: false,
      showCarAge: false,
      showExpirationDateStart: false,
      carAgeList: [
        { id: 1, name: 0 },
        { id: 2, name: 1 }
      ],
      planList: [
        { id: 1, name: '方案1' },
        { id: 2, name: '方案2' }
      ],
      carBrandList: [
        {
          id: 1,
          name: '宝马',
          type: [
            { id: 1, name: '320' },
            { id: 2, name: '520' },
            { id: 3, name: '525' }
          ]
        },
        {
          id: 2,
          name: '奔驰',
          type: [
            { id: 1, name: 'A180' },
            { id: 2, name: 'C200' },
            { id: 3, name: 'E300' }
          ]
        },
        {
          id: 3,
          name: '奥迪',
          type: [
            { id: 1, name: 'A3' },
            { id: 2, name: 'A4' },
            { id: 3, name: 'A6' }
          ]
        }
      ],
      carTypeList: []
    }
  },
  methods: {
    // 日期格式化
    formatDate (date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
    },
    // 车辆销售时间选择
    sellDateConfirm (date) {
      this.showSellDate = false
      this.sellDate = this.formatDate(date)
    },
    // 原厂保质期开始时间选择
    expirationDateStartSelect (date) {
      this.showExpirationDateStart = false
      this.expirationDateStart = this.formatDate(date)
    },
    // 汽车品牌选择
    carBrandSelect (item) {
      this.showCarBrand = false
      this.carBrand = item.name
      this.carType = ''
      this.carBrandList.forEach((obj, index) => {
        if (item.id === obj.id) {
          this.carTypeList = obj.type
          this.disable = false
        }
      })
    },
    // 汽车类型选择
    carTypeSelect (item) {
      this.showCarType = false
      this.carType = item.name
    },
    // 投保方案选择
    planSelect (item) {
      this.showPlan = false
      this.plan = item.name
    },
    // 车龄选择
    carAgeSelect (item) {
      this.showCarAge = false
      this.carAge = item.name
    },
    onClickLeft () {
      this.$router.back()
    }
  },
  components: {
  }
}
</script>

<style scope lang="less">
.insurance-info {
  .plan-info-span {
    width: 100%;
    height: 22px;
    background-color: rgb(246, 246, 246);
  }
  .safeguard-plan {
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
    .mui-icon {
      width: 30px;
      background-color: pink;
    }
    .text-span {
      display: block;
      text-indent: 20px;
      line-height: 20px;
      .help-icon {
        text-indent: 0;
        line-height: 40px;
      }
    }
    a {
      display: block;
      color: rgb(255, 102, 0);
      text-indent: 20px;
      line-height: 20px;
    }
  }
  .child-title {
    text-indent: 10px;
    font-size: 14px;
    background-color: rgb(255, 102, 0);
    height: 40px;
    line-height: 40px;
    margin: 0;
  }
  .car-owner-info {
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .car-info {
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
  }
  .van-checkbox {
    width: 100%;
    margin: 10px 0;
    padding: 10px 16px;
    font-size: 12px;
    .van-checkbox__icon {
      font-size: 14px;
    }
  }
  .immediate-insurance {
    margin: 20px 0;
    span {
      font-size: 22px;
    }
    font-size: 14px;
    margin-left: 14%;
  }
  .van-button--warning {
    background-color: #ff6600;
    border: 1px solid #ff6600;
  }
  button {
    margin-left: 52px;
    width: 48%;
    height: 54px;
    font-size: 16px;
  }
}
</style>
